<template>
    <div id='login'>
        <div class='login-view'>

            <!-- wrapper begin -->
            <div class="login-wraps">
                
           
                <div class="wrapper">
                    <div class="wrap-top">
                       <!--  <header class="header">
                           <h1 class="header__title">小额贷款平台</h1>
                           <br><br>
                           <p>壹潘科技——金融科技服务专家</p>
                           <br>
                           <p>坚持以技术创新为中心立足第三方金融服务</p>
                           <br>
                           <p>向金融企业提供科技服务和解决方案</p>
                       </header> -->

                        <div class="main">
                            <div class="login-form">
                                <ul class="login-form__input">
                                    <li class="login-form__item passlog" style="color:#35373b;">
                                       密码登录
                                    </li>
                                    <li class="login-form__item">
                                       <!-- <i class='iconfont icon-user'></i> -->
                                       <el-input id="nameee" v-model='username' autofocus type="text" placeholder="用户名" clearable></el-input>
                                       <!--  <input v-model='username' type="text" placeholder="用户名"> -->
                                    </li>
                                    <li class="login-form__item">
                                       <!--  <i class='iconfont icon-password'></i> -->
                                        <el-input v-model='password' placeholder="密码"type="password" clearable></el-input>
                                        <!-- <input v-model='password' type="password" placeholder="密码" @keyup.enter="login"> -->
                                    </li>
                                    <li>
                                       <!--  <span class="yanz">验证码:</span> -->
                                        <el-input
                                          class="yanzInp"
                                          placeholder="验证码"
                                          v-model="input10"
                                          size="small"
                                          clearable >
                                        </el-input>

                                        <a class="yanz bor" v-text="yanzNum" @click="yclick "></a>
                                    </li>
                                </ul>
                                <div class="login-form__button" @click='login' :class='{"event-disabled":loggingIn}'>
                                    <button-loading :loading='loggingIn'> 立即登录 </button-loading>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                
            </div>
            
            <!-- wrapper end -->
        </div>
         <div class="footers">
                     <footer-bar class='login-footer'></footer-bar>
         </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import  { mapGetters, mapActions }  from 'vuex'
    import md5 from '../utils/md5'
    import { loginApi, systemApi} from '../api/api'
    import { loginValidation } from '../validation/validation'
    import footerBar from '../components/FooterBar.vue'
    import buttonLoading from '../components/ButtonLoading.vue'


    export default {
        components:{
            footerBar,
            buttonLoading
        },
        data() {
            return {
                username:'',
                password:'',
                loggingIn:false,
                input10:"",
                yanzNum:""
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo'
            ]),
            appConfig(){
                return this.localInfo.appConfig
            },
             captchaId(){
                console.log(this.localInfo.configInfo.checkCaptchaParam.captchaId)
               /* if(this.localInfo.configInfo && this.localInfo.configInfo.checkCaptchaParam){
                    return this.localInfo.configInfo.checkCaptchaParam.captchaId
                }*/
            },
            
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setUserId',
                'setUserInfo',
                'setSessionId',
                'setNeedLogin',
                'setAdmin',
                'setMenuList',
                'setAppConfig'
            ]),
            getSession(){
                this.loggingIn = true
                let password = this.password
                loginApi.userLogin({
                    accName:this.username,
                    accPwd:password,
                })
                .then(result=>{
                   // alert(1)
                   console.log(1)
                    this.setSessionId(result.sessionId)
                    this.setMenuList(result.menuList)
                    this.setUserInfo(result.name)
                    this.loggingIn = false
                    localStorage.setItem("roles",result.roles)
                    this.$router.push({
                        name:'index'
                    })
                    this.password="";
                    this.username="";
                })
                .catch(error => {
                    console.error(error)
                    this.loggingIn = false
                })
            },
            login(){
                if(!loginValidation({ username:this.username, password:this.password })) return
                    if(!this.input10|| this.input10!=this.yanzNum){
                        this.setMsgTip({
                            text:"验证码错误",
                            type:"error"
                        })
                        return
                    }
                this.getSession()
                localStorage.setItem("admin",this.username)
            },
            yclick(){
                this.ynum()
            },
            ynum(){
                this.yanzNum=parseInt(Math.random()*(10000-999+1)+999)
            }
           
        },
        created(){
            // this.setMsgTipStyle({ top:'50px' })
            this.ynum()
            systemApi.getAppConfig()
            .then(result=>{
                this.setAppConfig(result)
            })
            .catch(error=>{
                console.error(error)
            })
            this.setNeedLogin(false)
            let _this=this;
            document.addEventListener("keyup",function(event){
                event.stopPropagation()
                if(event.keyCode==13){
                    _this.login();
                }
            })
        },
        updated(){
            
        }
    }
</script>

<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #login{
        height:100%;
        position:relative;
        background:url('../images/bglogin.png');
        background-size: 100% 100%;

    }
    .login-wraps{
        width:910px;
        //height:569px;
        margin:0 auto;
    }
    .footers{
        width:100%;
        height:20%;
        background: #2e324f;
    }
    .login-view{
        position:relative;
        width:100%;
        // height:100%;
        background-size: 100% 100%;
    }
    .login-view .login-form__button .button{
         border-radius: 0px!important;
         font-size: 16px;
    }
    .el-input__inner{
        border-radius: 0px!important;
    }
    .bor{
        border:1px solid #dcdfe6;
        float: right;
        width:96px;
        color:#409EFF!important;
        line-height:30px;
        text-align: center;
        font-size:16px;
    }
    .bor:hover{
        cursor: pointer;
    }
    .login-view .login-form__input .yanzInp{
        width:134px;
        height:34px!important;
    }
    #nameee .el-input__inner{
        width:256px!important;
    }
    .yanz{
        color:#757575;
        //font-size: 20px;
        margin-right:30px;
    }
    .el-input{
        width:256px;
        height: 34px;
        margin-left:34px;
    }
    .el-input__inner{
        height:34px;
    }
    .login-view{
        background-size: cover;
        color:$importColor;
        height:80%;
        &:before{
            content:'';
            position: absolute;
            width: 100%;
            height:100%;
            top:0;
            left:0;
            background: #f5f5f5;
            z-index:-2;
        }
        &:after{
            content:'';
            position: absolute;
            width: 100%;
            height:100%;
            top:0;
            left:0;
            z-index:-1;
        }
        /* .wrapper{
            width: 100%;
            box-sizing:border-box;
            position: relative;
            
        } */
        .wrap-top{
            width:910px;
            height:387px;
            margin:130px auto 0px;
            // height:300px;
            // position: absolute;
            // top:40%;
            // left:50%;
            // margin-left:-270px;
            // margin-top:-150px;
        }
        .header{
            margin-top:66px;
            text-align:left;
            float: left;
        }
        .header__title{
            @extend %weight-light;
            font-weight: normal;
            font-size: 26px;
            color:#35373b;
            font-weight:600;
            p{
                font-size:18px;
                color:#4a4a4a;
                font-weight:600;
            }
        }
        .header__company{
            @extend %weight-light;
            font-size: 14px;
            color:$dark;
            padding-top:10px;
        }
        .main{
            // padding-top:67px;
            /* padding: 50px 20px 100px 20px; */
            width:360px;
            padding-top:65px;
            background: #fff;
            float: right;
        }
        .passlog{
            display: block;
            text-align: center;
            font-size:20px;
        }
        .login-form{
            width: 320px;
            margin:0 auto;
        }
        .login-form__input{
            width: 100%;
            overflow:hidden;
            .iconfont{
                font-size:20px;
                color:$defaultColor;
                padding:0 12px;
            }
            input{
                flex:1;
                font-size: 15px;
               
            }
        }
        .login-form__item{
            // display:flex;
            align-items:center;
            background-color: #FFF;
            margin-bottom:20px;
        }
        .login-form__button{
            margin-top: 30px;
            margin-bottom:80px;
            width:258px;
            margin-left: 34px;
            .button{
                padding: 13px 20px;
                font-size: 15px;
            }
        }
        .login-footer{
            width:100%;
            height:250px;
            //padding-top: 2%;
        }

    }
</style>
